<template>
  <div class="home">
    <div class="map">
      <MapChart></MapChart>
    </div>
    <div class="right">
      <div class="up">
        <div style="font-size: 18px; color: #00ffff; margin: 10px">
          月度设备出库统计
        </div>
        <div class="mainBox">
          <div class="itemBox">
            <div class="num">61</div>
            <div class="itemImg" @click="jumpOpen(1)">
              <img
                src="../../assets/img/list/listKgg.png"
                style="width: 129px; height: auto"
                alt=""
              />
            </div>
            <div class="itemBottom itemKg">开关柜数量</div>
          </div>
          <div class="itemBox">
            <div class="num" style="color: #5ce4ec">231</div>
            <div class="itemImg">
              <img
                src="../../assets/img/list/listKgg.png"
                style="width: 129px; height: auto"
                alt=""
              />
            </div>
            <div class="itemBottom itemBY" style="color: #5ce4ec">
              变压器数量
            </div>
          </div>
        </div>
      </div>
      <div class="middle">
        <div style="font-size: 18px; color: #00ffff; margin: 10px">
          月度开关柜产量
        </div>
        <div class="monthDay">
          <div class="monthBg"></div>
          <monthKG :key="KG"></monthKG>
        </div>
      </div>
      <div class="middle">
        <div style="font-size: 18px; color: #00ffff; margin: 10px">
          月度变压器产量
        </div>
        <div class="monthDay">
          <div class="monthBg"></div>
          <monthBY :key="BY"></monthBY>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import MapChart from "@/components/overall/MapCpn.vue";
import monthKG from "@/components/overall/monthKG.vue";
import monthBY from "@/components/overall/monthBY.vue"
import { onMounted, ref } from "vue";
import { useRouter , useRoute } from 'vue-router'

const KG = ref(false);
const BY = ref(false);

const router = useRouter()
const jumpOpen =(val)=>{
  router.push({
    name:'openChange',
    query:{
      val:val
    }
  })
}

onMounted(() => {
  KG.value = !KG.value;
  BY.value = !BY.value;
});
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

// * 隐藏滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: transparent;
}

/* 隐藏滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.home {
  width: 100vw;
  height: 95vh;
  position: relative;
  box-sizing: border-box;

  .map {
    width: 80vw;
    height: 85vh;
    position: absolute;
    left: 0;
    overflow: hidden;
  }
  .right {
    position: absolute;
    width: 29vw;
    height: auto;
    top: 12px;
    right: 22px;
    // background-color: aliceblue;
    display: flex;
    align-items: center;
    justify-content: right;
    flex-direction: column;
    .up {
      width: 100%;
      height: 254px;
      background: url("../../assets/img/layout/itemBg.png") no-repeat center;
      background-size: cover;

      .mainBox {
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        .itemBox {
          width: 137px;
          height: auto;
          display: flex;
          align-items: center;
          flex-direction: column;
          margin-top: 10px;
          .num {
            font-size: 20px;
            color: #ffa800;
            margin-bottom: 5px;
            font-weight: bold;
          }
          .itemImg {
            margin-bottom: 10px;
          }
          .itemBottom {
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 15px;
          }
          .itemKg {
            background: url("../../assets/img/list/wgBg.png") no-repeat center;
            background-size: cover;
            color: #ffa800;
          }
          .itemBY {
            background: url("../../assets/img/list/byBg.png") no-repeat center;
            background-size: cover;
            color: #5ce4ec;
          }
        }
      }
    }
    .middle {
      width: 100%;
      height: 254px;
      background: url("../../assets/img/layout/itemBg.png") no-repeat center;
      background-size: cover;
      margin-top: 20px;
      .monthDay {
        width: 480px;
        height: 240px;
        position: relative;
        .monthBg {
          width:82%;
          height: 51%;
          background: url("../../assets/img/list/Cwang.png") no-repeat center;
          background-size: cover;
          position: absolute;
          left: 38px;
          bottom: 68px;
        }
      }
    }
  }
}
</style>
